<template>
  <div id="hotel">
    <div id="top">
      <div id="main">
        <p id="first">
          <span> 国内 </span>
          <span> 海外 </span>
        </p>
        <van-cell title="日期" :value="date" @click="show = true" />
        <van-calendar v-model:show="show" @confirm="onConfirm" />
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder=""
          @click="showAddress = true"
        />
        <van-popup
          v-model:show="showAddress"
          round
          position="bottom"
          clear-icon="clear"
        >
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="showAddress = false"
            @finish="onFinish"
          />
        </van-popup>
        <input type="text" placeholder="详细位置" v-model="details" />
        <van-button type="warning" @click="fun">查询</van-button>
      </div>
    </div>
    <ul>
      <p>最近查询</p>
      <li v-for="item in list" :key="item.id">
        <img :src="item.img" alt="" />
        <i>{{ item.title }}</i>
        <span>{{ item.detail }}</span>
      </li>
    </ul>
    <van-tabbar fixed placeholder>
      <van-tabbar-item icon="home-o">我的收藏</van-tabbar-item>
      <van-tabbar-item icon="search">我的订单</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import {
  Cell,
  CellGroup,
  Calendar,
  Cascader,
  Field,
  Popup,
  Button,
  Tabbar,
  TabbarItem,
} from "vant";
export default {
  name: "Hotel",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Calendar.name]: Calendar,
    [Cascader.name]: Cascader,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  setup() {
    //vueX获取数据
    const store = useStore();
    const list = ref([]);
    const allList = ref([]);
    onMounted(async () => {
      await store.dispatch("hotel/hotelData");
      list.value = store.state.hotel.hotelMainList.hotlList;
      allList.value = list.value;
    });
    //时间选择
    const address = ref("");
    const date = ref("");
    const show = ref(false);
    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (value) => {
      show.value = false;
      date.value = formatDate(value);
    };
    //地区选择
    const showAddress = ref(false);
    const fieldValue = ref("");
    const cascaderValue = ref("");
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = [
      {
        text: "浙江省",
        value: "330000",
        children: [{ text: "杭州市", value: "330100" }],
      },
      {
        text: "江苏省",
        value: "320000",
        children: [{ text: "南京市", value: "320100" }],
      },
    ];
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      showAddress.value = false;
      fieldValue.value = selectedOptions.map((option) => option.text).join("/");
    };
    //详细位置
    const details = ref("");
    //底部
    const fixed = true;
    //最近查询部分数据
    const fun = function () {
      list.value = allList.value;
      let res = fieldValue.value.slice(0, 3);
      if (res === "") {
        return;
      }
      list.value = allList.value.filter((el) => {
        return el.citName === (res === "浙江省" ? 1 : 0);
      });
    };
    return {
      address,
      show,
      onConfirm,
      date,
      showAddress,
      fieldValue,
      cascaderValue,
      options,
      onFinish,
      details,
      fixed,
      list,
      fun,
    };
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
#top {
  width: 100%;
  height: 200px;
  background-image: url("../assets/imgsXLL/1.png");
  background-position: -80px bottom;
  background-size: 150% 150%;
  position: relative;
  > #main {
    width: 95%;
    overflow: hidden;
    background-color: white;
    border-radius: 20px;
    position: absolute;
    top: 130px;
    left: 10px;
    > #first {
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      font-weight: 700;
      > span {
        display: inline-block;
        width: 50%;
        text-align: center;
      }
    }
    /deep/.van-cell {
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      margin-left: 15px;
      margin-right: 15px;
      border-bottom: 1px solid black;
      width: 90%;
      padding-right: 10px;
    }
    > input {
      border: none;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      margin-left: 15px;
      margin-right: 15px;
      border-bottom: 1px solid black;
      width: 90%;
    }
    > button {
      margin-left: 15px;
      margin-right: 15px;
      width: 90%;
      margin-top: 20px;
      border-radius: 10px;
      background-image: url("../assets/imgsXLL/组 1(4).png");
      font-size: 20px;
    }
  }
}
/deep/.van-icon-arrow:before {
  content: "";
}
/deep/.van-field__control {
  text-align: right;
}
/deep/.van-tabbar-item {
  font-size: 16px;
  color: #646464;
}
/deep/.van-tabbar-item__icon {
  font-size: 26px;
}
ul {
  position: absolute;
  top: 430px;
  width: 100%;
  overflow: auto;
  list-style: none;
  > p {
    font-size: 18px;
    color: #646464;
    text-align: center;
    width: 100%;
  }
  > li {
    width: 50%;
    overflow: hidden;
    float: left;
    margin-bottom: 20px;
    > img {
      display: block;
      width: 190px;
      height: 150px;
    }
    > i {
      font-style: normal;
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      color: #cd7d44;
      display: block;
      text-align: center;
      font-weight: 600;
    }
    > span {
      font-style: normal;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      color: #646464;
      display: block;
      text-align: center;
    }
  }
}
</style>
